<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header :is-back="true"></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="10"
        :searchSize="10"
        :otherSize="-1"
        justify="space-between"
        :searchStyle="{height: '125px', backgroundColor: '#fff'}"
        :logoStyle="{fontSize: '100px'}"
      >
      </n-search-bar>
      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; color: #666;">
        <span style="text-align: left; width: 1000px; margin-bottom: 10px; color: #676769;">填写并核对订单信息</span>
        <div style="border: 1px solid #f3f3f3; width: 1000px;">
          <receive-goods @changeAddress="handleChangeAddress"></receive-goods>
          <payment-method></payment-method>
          <delivery-list :shoppingCartInfos="this.shoppingCartInfos"></delivery-list>
        </div>
        <summarize
          :totalPrice="totalPrice"
          :addressInfo="addressInfo"
          @submit="handleSubmit"
        ></summarize>
      </div>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>
  
<script>
import NHeaderVue from "@/components/NHeader.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import ReceiveGoodsVue from "@/components/order/ReceiveGoods.vue";
import PaymentMethodVue from "@/components/order/PaymentMethod.vue";
import DeliveryListVue from "@/components/order/DeliveryList.vue";
import SummarizeVue from "@/components/order/Summarize.vue";

import { useShoppingCartInfo } from "@/store/shoppingCart";
const shoppingCartInfo = useShoppingCartInfo();

import { useOrderInfo } from "@/store/order";
const orderInfo = useOrderInfo();

import { selectShoppingCartsByIds } from "@/api/shoppingCart";
import { orderAdd } from "@/api/order";

export default {
  components: {
    NHeader: NHeaderVue,
    NSearchBar: NSearchBarVue,
    ReceiveGoods: ReceiveGoodsVue,
    PaymentMethod: PaymentMethodVue,
    DeliveryList: DeliveryListVue,
    Summarize: SummarizeVue,
  },
  computed: {
    totalPrice() {
      var temp = 0;
      this.shoppingCartInfos.forEach((v, i, a) => {
        temp += v.price * v.number;
      });

      return temp.toFixed(2);
    },
  },
  data() {
    return {
      addressInfo: {},
      shoppingCartInfos: [],
    };
  },
  methods: {
    doSelectShoppingCartsByIds() {
      selectShoppingCartsByIds(shoppingCartInfo.shoppingCartIds).then((res) => {
        this.shoppingCartInfos = res;
      });
    },

    handleChangeAddress(value) {
      this.addressInfo = value;
    },
    handleSubmit() {
      var temp = [];

      for (var shoppingCart of this.shoppingCartInfos) {
        temp.push({
          addressId: this.addressInfo.addressId,
          commodityId: shoppingCart.commodityId,
          logistics: shoppingCart.logistics,
          number: shoppingCart.number,
          price: shoppingCart.price,
          shoppingCartId: shoppingCart.shoppingCartId
        });
      }

      orderAdd(temp).then(res => {
        shoppingCartInfo.shoppingCartIds = []
        orderInfo.orderId = res.orderId
        this.$router.push('/pay')
      })
    },
  },
  created() {
    this.doSelectShoppingCartsByIds();
  },
};
</script>
  
  <style scoped>
.header {
  background-color: #eae5e3;
}

.main {
  overflow: hidden;
  padding: 0;
}
</style>